<template>
  <d2-container class="page">
    <d2-page-cover>
      <d2-icon-svg class="logo" name="d2-admin" />
      <template slot="footer">
        <div class="btn-group">
          <span class="btn-group__btn" @click="$open('https://github.com/d2-projects')">开源组织</span> |
          <span class="btn-group__btn" @click="$open('https://doc.d2admin.fairyever.com/zh/')">文档</span> |
          <span
            class="btn-group__btn"
            @click="$open('https://github.com/d2-projects/d2-admin-start-kit')"
          >简化版</span> |
          <span
            class="btn-group__btn"
            @click="$open('https://alibaba.github.io/ice/scaffold?type=vue')"
          >飞冰</span> |
          <span
            class="btn-group__btn"
            @click="$open('https://juejin.im/user/57a48b632e958a006691b946/posts')"
          >掘金</span> |
          <span class="btn-group__btn" @click="$open('https://daily.fairyever.com')">日报</span> |
          <el-popover :width="172" trigger="hover">
            <p class="d2-mt-0 d2-mb-10">D2Projects</p>
            <img src="./image/qr@2x.png" style="width: 172px;" />
            <span slot="reference" class="btn-group__btn btn-group__btn--link">
              <d2-icon name="weixin" />微信公众号
            </span>
            <p
              style="font-size: 12px; margin-top: 0px; margin-bottom: 0px;"
            >官方公众号，主要推送前端技术类文章、框架资源、学习教程，以及 D2 系列项目更新信息</p>
          </el-popover>
        </div>
        <d2-badge />
        <d2-help-btn />
      </template>
    </d2-page-cover>
    <!-- <vue-json-editor v-model="json" :showBtns="true" @json-change="onJsonChange"
    :mode="'code'"
    lang="zh"
    @json-save="onJsonSave"
    @has-error="onError"></vue-json-editor> -->
  </d2-container>
</template>

<script>
// 引入vue-json-editor模块
// import vueJsonEditor from 'vue-json-editor'
import D2HelpBtn from './components/d2-help-btn'
import D2Badge from './components/d2-badge'
import D2PageCover from './components/d2-page-cover'
import { getResource } from 'api/role'
export default {
  components: {
    D2HelpBtn,
    D2Badge,
    D2PageCover
    // vueJsonEditor
  },
  data () {
    return {
      filename: __filename,
      json: {
        msg: 'demo of jsoneditor'
      }
    }
  },
  methods: {
    onJsonChange (v) {
      console.log('value:', v)
    },
    onJsonSave (e) { console.log('value:', e) },
    onError (e) { console.log('value:', e) }
  },
  mounted () {
    getResource().then(res => {
      console.log(res)
    })
  }
}
</script>

<style lang="scss" scoped>
.page {
  .logo {
    width: 120px;
  }
  .btn-group {
    color: $color-text-placehoder;
    font-size: 12px;
    margin-top: 0px;
    margin-bottom: 20px;
    .btn-group__btn {
      color: $color-text-sub;
      &:hover {
        color: $color-text-main;
      }
      &.btn-group__btn--link {
        color: $color-primary;
      }
    }
  }
}
</style>
